<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Block Yourself from Analytics :: Options</title>
 <link rel="icon" type="image/png" href="images/icon-019.png" />
<style>
html, body { margin:0; padding:0; font-family:"Segoe UI", Tahoma, sans-serif; font-size:12px; border:0; background-color:#dfdfdf; }
h1 { margin:0; padding:0; color: #80accf; font-size:22px; }
h1 > img { vertical-align:bottom; }
hr { margin-bottom:5px; border:1px solid #80accf; }
a { color:#000; }

.author {
	float: right;
	margin-top: .8em;
	color: #aaa;
}
.author > a {
	color: #aaa;
	text-decoration: none;
}

#opcije { margin:25px auto; padding:15px; width:700px; border:1px solid #ddd; border-radius:5px; background-color:white; }
#tabs { margin-top:1em; height:400px; }
#tab_nav { margin:0; padding:0; list-style:none; list-style-position:inside; display:block; -webkit-user-select:none; user-select:none; }
#tab_nav li { float:left; margin:0 .5em 0 0; padding:5px 15px; display:block; list-style:none; font-weight:bold; border-top-left-radius:5px; border-top-right-radius:5px; background-color:#e1e2e3; cursor:pointer; }
li:hover { color:#555; text-decoration:underline; }
li.tab-selected { color:#fff; background-color:#80accf !important; }
.tabc.tab-selected { display: block; }
.tabc { clear:right; padding:15px; height:350px; display:none; border:2px solid #80accf; border-radius:5px; border-top-left-radius:0; }
.nav-right {
	float: right;
	padding: 5px 0;
	text-decoration: none;
}
.nav-right + .nav-right:before {
	content: " | ";
	float: right;
	margin: 0 .5em;
}
.nav-right:hover {
	color: #555;
	text-decoration: underline;
}

fieldset { margin:0 0 10px; padding:5px 10px; width:300px; border:1px solid #bfbfbf; }
input { margin:5px; padding:0; }
#exception_list_enc { margin-bottom:10px; height:310px; overflow-x:hidden; border:1px solid #80accf; }
#exception_list { width:100%; border:0; table-layout:fixed; empty-cells:show; font-size:1em; }
#exception_list thead tr { color:#fff; background-color:#80accf; font-weight:bold; }
#exception_list thead td { padding:4px; }
#exception_list tbody td { overflow:hidden; white-space:nowrap; }
#exception_list_body tr:hover { background-color:#d8f0fa; background-image:url(images/hover-bg.gif); background-repeat:repeat-x; border-bottom:1px solid #80accf; }
#exception_list_body a { color:black; }
.elb_td1 { padding-left:6px; min-width:200px; }
.elb_td2 { width:40px; text-align:center; }
img.cmd-rule-edit { margin-right:2px; cursor:pointer; }
img.cmd-rule-delete { cursor:pointer; }
#website_url { margin-left:0; margin-bottom:0; padding:2px; height:24px; }
#website_url_add { height:24px; line-height:1em; }
.website_url_edit { height:24px; }
#website_url, .website_url_edit, .suggestbox { width:400px; box-sizing:border-box; }
#suggestbox_cont { display:none; }
.suggestbox { float:left; margin:0; padding:0 2px; max-height:80px; position:absolute; overflow-y:auto; list-style:none; color:#555; background-color:#fff; border:1px solid #80accf; cursor:pointer; z-index:100; }
.suggestbox li { padding:2px 4px; }
.suggestbox li.selected { background-color:#d8f0fa; }
.btns { float:right; margin-left:5px; padding:3px 15px; }
td > .btns { padding:1px 10px; }

#import_data { margin:5px 0; width:100%; height:150px; box-sizing:border-box; }
#import_status { margin-top:20px; white-space:pre; }
#cmd_import { float:none; }

#export_data_wrap { margin-top:20px; opacity:0; transition:opacity .5s ease; }
#export_data { margin:5px 0; width:100%; height:180px; box-sizing:border-box; }
#cmd_export { float:none; }

footer { margin-top:2em; border-top:1px solid #fff; }
#social { float:left; height:32px; line-height:32px; font-size:32px; font-weight:bold; color:#ddd; }
#social span { float:right; margin-left:5px; }
#social img { float:left; margin-right:6px; opacity:.8; }
#social img:hover { opacity:1; }
#commands { float:right; }
#commands input { margin:0; margin-left:2px; padding:0 10px; width:80px; height:32px; }
#commands #cmd_close{margin-left:10px;}
input[type="submit"],
input[type="button"] { cursor:pointer; }
input:disabled { cursor:default; }

.alert { overflow:hidden; margin-bottom:15px; padding:20px; height:auto; background-color:#f44336; color:white; transition:opacity 1s ease-out; opacity:1; }
.alert > .close { float:right; margin-left: 15px; color:white; cursor:pointer; font-weight:bold; font-size:22px; line-height:20px; transition:.3s; }
.alert > .close:hover { color:black; }
.alert-warn { background-color:#ff9800; }
.alert-info { background-color:#2196F3; }
.alert-none { opacity: 0; padding:0; height: 0; }

.extension-info {
	display: none;
	margin: 4em auto;
	padding: 1em;
	max-width: 450px;
	width: 450px;
	line-height: normal;
	background: #fff;
	border: 1px solid #ccc;
	font-size: 1.5em;
    text-align: center;
    transition-duration: .5s;
    transition-property: color, background-color;
}
.extension-info > small {
	display: block;
	margin-top: .5em;
}
.options-hide > #opcije {
	display: none;
}
.extension-error > .extension-info-error,
.extension-support > .extension-info-support {
	display: block;
}
</style>
<script src="logger.js"></script>
<script src="cross.js"></script>
<script src="storage.js"></script>
<script src="options.js"></script>
</head>
<body class="options-hide extension-error">
	<div class="extension-info extension-info-error">
		Extension encountered an error. Please try again.
		<small>If problem persists please report this issue to the extension author.</small>
	</div>
	<div class="extension-info extension-info-support">
		This browser or browser version is not supported. Please update your browser.
	</div>
 <form id="opcije">
	<div class="author"><a href="https://dev.tekin.cn" target="_blank" rel="noopener" title="Author: Igor Jerosimić">dev.tekin.cn</a></div>
	<h1><img src="images/icon-019.png" alt="Block Yourself from Analytics logo" /> Block Yourself from Analytics :: Options</h1>
	<hr style="margin-bottom:20px;" />

	<div id="alert" class="alert alert-none">
		<span id="alert-close" class="close">&times;</span>
		<div id="alert-message"></div>
	</div>
	<div id="tabs">
		<ul id="tab_nav">
			<li id="tab0" class="tab-selected">Website List</li>
			<li id="tab1">General</li>
			<li id="tab2">Import</li>
			<li id="tab3">Export</li>
		</ul>
		<a href="https://dev.tekin.cn" class="nav-right" target="_blank" rel="noopener" title="Open help page">Help</a>
		<a href="https://dev.tekin.cn/contactus.htmlus.html?referrer-ver=Block-Yourself-from-Analytics" class="nav-right" target="_blank" rel="noopener" title="Open contact page" id="tab_contact">Found a bug?</a>

		<div id="tab0c" class="tabc tab-selected">
			<div id="exception_list_enc">
			 <table id="exception_list">
				<thead>
					<tr><td title="Website for which the rule applies">Website</td><td class="elb_td2" title="Commands"></td></tr>
				</thead>
				<tbody id="exception_list_body"></tbody>
			 </table>
			</div>

			<input id="website_url" name="website_url" type="text" placeholder="e.g. www.example.com" title="e.g. www.example.com" />
<div style="display:none">
<input id="websiteRegex" name="websiteRegex" type="checkbox" title="Check this box if you wish to use RegEx" /><label for="websiteRegex" title="Check this box if you wish to use RegEx">Use RegEx</label>
</div>
			<input id="website_url_add" name="website_url_add" type="button" value="Add" class="btns" title="Add domain to list" />
			<div id="suggestbox_cont">
				<ul id="suggestbox" class="suggestbox"></ul>
			</div>
		</div>
		<div id="tab1c" class="tabc">
			<!-- <fieldset>
				<legend>Popup menu</legend>
				<input id="showPopupMenuClose" name="showPopupMenuClose" type="checkbox" checked="checked" /><label for="showPopupMenuClose">Display "Close"</label>
			</fieldset>
			<br /><br /><input id="showSuggestions" name="showSuggestions" type="checkbox" checked="checked" /><label for="showSuggestions">Website List: Show currently opened websites as a suggestion below URL textbox</label>
			-->
			<div class="checkbox">
				<label>
					<input id="showPopupMenuClose" name="showPopupMenuClose" type="checkbox" checked="checked" />
					<span>Display "Close" button in the popup menu</span>
				</label>
			</div>
			<div class="checkbox">
				<label>
					<input id="showSuggestions" name="showSuggestions" type="checkbox" checked="checked" />
					<span>Website List: Show currently opened websites as a suggestion below URL textbox</span>
				</label>
			</div>
		</div>
		<div id="tab2c" class="tabc">
			<div>
				Use following field to restore your settings from a backup or import from another browser:
				<textarea id="import_data"></textarea>
			</div>
			<fieldset>
				<legend>Import data</legend>
				<div class="checkbox">
					<label>
						<input id="import_website_list" name="import_data_type" type="radio" value="website_list" checked="checked" />
						<span>Website list</span>
					</label>
				</div>
				<div class="checkbox">
					<label>
						<input id="import_all" name="import_data_type" type="radio" value="all" />
						<span>Website list + Settings</span>
					</label>
				</div>
			</fieldset>
			<input id="cmd_import" class="btns" type="button" value="Import" />
			<div id="import_status"></div>
		</div>
		<div id="tab3c" class="tabc">
			<fieldset>
				<legend>Export data</legend>
				<div class="checkbox">
					<label>
						<input id="export_website_list" name="export_data_type" type="radio" value="website_list" checked="checked" />
						<span>Website list</span>
					</label>
				</div>
				<div class="checkbox">
					<label>
						<input id="export_all" name="export_data_type" type="radio" value="all" />
						<span>Website list + Settings</span>
					</label>
				</div>
			</fieldset>
			<input id="cmd_export" class="btns" type="button" value="Export" />
			<div id="export_data_wrap">
				Use following data to backup your settings or import into another browser:
				<textarea id="export_data"></textarea>
			</div>
		</div>
	</div>

	<footer>
	 <div id="social">
		
		<a href="https://twitter.com/?status=Block Yourself from Analytics extension for browsers: https://dev.tekin.cn/extensions/block-yourself-from-analytics" target="_blank" rel="noopener" title="Share extension on Twitter"><img src="images/social/twitter.png" alt="Twitter" /></a>
		<span>SHARE IT</span>
	 </div>
	 <div id="commands">
		<input id="cmd_save" type="button" value="Save" disabled="disabled" />
		<input id="cmd_apply" type="button" value="Apply" disabled="disabled" />
		<input id="cmd_close" type="button" value="Close" />
	 </div>
	 <div style="clear:both;"></div>
	</footer>
 </form>
</body>
</html>
